<template>
    <div class="or-page">
			<div class="or-title row mb-12">
				<span>保修凭证</span>
				<span @click="$emit('toOk')">×</span>
			</div>
			<div class="mt-12 mb-16">订单号：{{ value.card_id }}</div>
			<div class="top-box mb-12">
				<p class="mb-12"><span class="iconfont icon-20">&#xebc8;</span></p>
				<p class="md mb-12">1年保质</p>
				<p>保修至：{{ value.business_order_order_no }}</p>
			</div>
			<ul>
				<li class="bottom-line"><span>服务项目</span><span class="right-text">{{ value.product_name }}</span></li>
				<li><span>车辆信息</span><span class="right-text">{{ value.opt_car_series_names }}</span></li>
				<li class="bottom-line"><span>车牌号码</span><span class="right-text">{{ value.business_car_license_plate }}</span></li>
				<li><span>服务日期</span><span class="right-text">{{ value.business_order_created_at }}</span></li>
				<li><span>服务门店</span><span class="right-text">{{ value.business_shop_name }}</span></li>
				<li class="bottom-line"><span>技师</span><span class="right-text">{{ value.product_name || ' ' }}</span></li>
				<li class="mb-16"><span>服务费用</span><span class="amount">￥{{ value.pay_amount }}</span></li>
			</ul>
			<div class="desc-box">
				<p class="font-14 mb-10">保修说明</p>
				<p class="mb-5">·保修期内如出现质量问题，免费返工</p>
				<p class="mb-5">·请保存此凭证作为保修依据</p>
				<p class="mb-5">·如有问题请联系门店客服</p>
			</div>
			<div>
				<button class="btn btn-black" @click="$emit('toOk')">确定</button>
			</div>
	</div>
</template>

<script>
  export default {
    props: {
        value: Object
    },
    data: () => {
        return {}
    }
  }
</script>
<style scoped>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.icon-20{
		font-size: 20px;
	}
	.bottom-line {
		border-bottom: 1px solid #eee;
	}

	.or-page {
		background-color: #fff;
		height: 80vh;
		border-radius: 8px;
		padding: 16px;
		color: #9aa0ad;
		font-size: 12px;
		text-align: left;
		overflow: auto;
	}
	.mt-12 {
		margin-top: 12px;
	}
	.mb-10 {
		margin-bottom: 10px;
	}
	.mb-5 {
		margin-bottom: 5px;
	}
	.mb-12 {
		margin-bottom: 12px;
	}
	.mb-16 {
		margin-bottom: 16px;
	}
	.or-title {
		font-size: 16px;
		font-weight: bold;
		color: #000;
		
	}
	.right-text{
		color: #000
	}
	.row ,ul li{
		display: flex;
		justify-content: space-between;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	ul li {
		height: 30px;
		line-height: 30px;
	}
	.top-box {
		background-color: #eff6ff;
		text-align: center;
		padding: 14px 0;
		color: #2e50b3;
	}
	.top-box .md {
		font-size: 16px;
		font-weight: bold;
	}
	.font-14 {
		font-size: 14px;
	}
	.amount {
		color: #2e50b3;
		font-size: 16px;
		font-weight: bold;
	}
	.desc-box {
		padding: 12px;
		background-color: #fefce8;
		color: #94622d
	}
	.btn {
        margin-top: 12px;
        background-color: blue;
        padding: 6px 14px;
        color: #fff;
        border: none;
        border-radius: 6px;
				width: 100%;
    }
    .btn-black {
        margin-top: 12px;
        background-color: #18181b;
    }
</style>
